<template>
    <view class="bottom">
        <Header></Header>
        <view>
            <view class="back">
                <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                        name="arrow-left" color="#00eaff" @click="back"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">Roll details</text>
            </view>

            <view class="room">
                <view class="room-detail">
                    <view style="font-size: 36rpx;padding: 5rpx">{{ roomDetail.room_name }}</view>
                    <view style="font-size: 30rpx;padding: 5rpx">{{ roomDetail.room_desc }}</view>
                    <view class="line"></view>
                    <view style="color: #ceb45a">Ends ：{{ formatTime(roomDetail.prize_time) }}</view>
                    <view style="padding-top: 20rpx">
<!--                        <text>Remaining from the lottery draw</text>-->
                        <!-- 倒计时 -->
                        <uni-countdown
                            :day=days :hour=hours :minute=minutes :second=seconds :show-day="false"
                            :font-size="20" @timeup="ends"
                            color="#FFFFFF" background-color="#007AFF" splitorColor="#FFFFFF"
                            format="ddd:hh:mm:ss">
                        </uni-countdown>
                    </view>
                    <view style="padding-top: 35rpx;width: 40%" v-if="!disabled">
                        <u-button class="custom-style" :disabled="disabled" @click="intoRoom" hover-class="none"
                                  :loading="intoRoomLoading">
                            join now
                            <u-icon name="plus-circle-fill" size="36" style="padding-left: 10rpx"></u-icon>
                        </u-button>
                    </view>
                    <view style="padding-top: 35rpx;width: 40%" v-else>
                        <u-button class="custom-style" :disabled="disabled">
                            Ended
                        </u-button>
                    </view>
                </view>
            </view>
            <view>
                <view style="background-color: #222a4e;border-radius: 25rpx;margin-top: 30rpx">
                    <view style="text-align:center;padding-top: 30rpx;padding-bottom: 20rpx">
                        <view style="padding: 20rpx">
                            <u-icon name="gift-fill" size="36" style="padding-right: 10rpx"></u-icon>
                            <text style="font-size: 36rpx">All Items</text>
                        </view>
                        <view>
                            <text style="color: #e4c65c;padding-right: 10rpx">{{ roomDetail.goods_num }}</text>
                            Items total Value：
                            <text style="color: #e4c65c">{{ parseFloat(roomDetail.goods_coin_total).toFixed(2) }}</text>
                            <i class=" custom-icon custom-icon-objects-color_diamond"
                               style="padding-left: 5rpx;color: #65a5c7"></i>
                        </view>
                    </view>
                    <view>
                        <u-row :gutter="20">
                            <u-col span="6" v-for="(goods,index) in roomDetail.goods_list" :key="index">
                                <view class="goods-list" :style="getBackgroundStyle(goods.tag)">
                                    <view>
                                        <u-image :src="goods.image" width="300rpx" height="225rpx"></u-image>
                                    </view>
                                    <view class="goods-list-name">
                                        <view>{{ goods.goods_name }}</view>

                                    </view>
                                    <view class="goods-list-price">
                                        <text>{{ goods.coin_price }}</text>
                                        <i class=" custom-icon custom-icon-objects-color_diamond"
                                           style="padding-left: 5rpx;color: #65a5c7"></i>
                                    </view>
                                </view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </view>
            <view v-if="showResult">
                <view style="text-align:center;padding-top: 30rpx;padding-bottom: 20rpx">
                    <view style="padding: 20rpx">
                        <u-icon name="volume-up" size="36" style="padding-right: 10rpx"></u-icon>
                        <text style="font-size: 36rpx">Results</text>
                    </view>
                </view>
                <view v-for="(item,index) in prizeUserList" :key="index">
                    <view class="result">
                        <view>
                            <u-avatar :src="item.avatar" size="100" mode="circle"></u-avatar>
                        </view>
                        <view class="result-text">
                            <text>{{ item.nickname }}</text>
                        </view>
                        <view>
                            <u-image :src="item.goods_image" width="100rpx" height="100rpx"></u-image>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else>
                <view style="background-color: #222a4e;border-radius: 25rpx;margin-top: 30rpx">
                    <view style="text-align:center;padding-top: 30rpx;padding-bottom: 20rpx">
                        <view style="padding: 20rpx">
                            <u-icon name="account-fill" size="36" style="padding-right: 10rpx"></u-icon>
                            <text style="font-size: 36rpx">All Participants</text>
                        </view>
                        <view style="padding-top: 30rpx;padding-bottom: 20rpx">
                            <text style="color: #e4c65c;padding-right: 10rpx">{{ roomDetail.join_num }}</text>
                            Users
                        </view>
                    </view>
                    <view>
                        <u-row :gutter="20">
                            <u-col span="3" v-for="(user,index) in userList" :key="index">
                                <view class="user-list">
                                    <view>
                                        <u-avatar :src="user.avatar" size="default" shape="circle"></u-avatar>
                                    </view>
                                    <view style="text-align: center;color: white;margin-bottom: 20rpx">
                                        <view>{{ user.nickname }}</view>
                                    </view>
                                </view>
                            </u-col>
                        </u-row>
                    </view>
                    <view class="loading">
                        <view v-if="!noMore&&this.total>=10">
                            <u-button class="loading-style" shape="circle" @click="loadingUser">
                                Load more
                            </u-button>
                        </view>
                        <view v-else>
                            <u-divider style="padding: 30rpx" bg-color="#222a4e">There's no more data left</u-divider>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 提示框 -->
        <u-toast ref="uToast"/>
        <!-- 回到顶部 -->
        <u-back-top :scroll-top="scrollTop"></u-back-top>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: 'roomDetail',
    components: {
        Header,
        CustomTabbar,
    },
    onLoad(option) {
        // 获取房间详情
        this.getRoomDetail(option.id);
    },
    data() {
        return {
            windowsWidth: 0,
            // 房间详情
            roomDetail: {},
            // 用户列表
            userList: [],
            // 分页
            current_page: 1,
            last_page: 0,
            total: '',
            noMore: false,
            // 倒计时
            seconds: 0,
            minutes: 0,
            hours: 0,
            days: 0,
            // 加入按钮是否禁用
            disabled: false,
            // 加入房间loading
            intoRoomLoading: false,
            // 滚动距离
            scrollTop: 0,
            // 是否展示中奖结果
            showResult: false,
            // 中奖名单
            prizeUserList: [],
        };
    },
    created() {
    },
    // 滚动监听
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
    },
    methods: {
        // 返回
        back() {
            uni.navigateBack()
        },
        getRoomDetail(id) {
            this.$u.api.getRoomDetail({
                room_id: id
            }).then(res => {
                if (res.code === 1) {
                    this.roomDetail = res.data
                    if (this.roomDetail.end_time * 1000 < new Date().getTime()) {
                        this.showResult = true
                        this.getRoomPrizeUser()
                    }
                    this.countdown()
                    this.getUserList()
                }
            })
        },
        // 计算背景图
        getBackgroundStyle(tag) {
            // 根据tag的值返回不同的背景图样式
            switch (tag) {
                case 'legend':
                    return "background: linear-gradient(167deg,#4C5070 32.38%,#AC772B 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);";
                case 'chuanqi':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#902133 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'supreme':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#5E1D73 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);';
                case 'rare':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#2C1D7E 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'normal':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#7E849C 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                default:
                    return '';
            }
        },
        // 获取参加人员列表
        getUserList() {
            this.$u.api.getRoomUser({
                room_id: this.roomDetail.id,
                current_page: this.current_page
            }).then(res => {
                if (res.code === 1) {
                    // 没数据
                    if (res.data.data.length === 0) {
                        this.noMore = true;
                        this.userList = []
                        return
                    }
                    this.userList = res.data.data
                    this.total = res.data.total
                    this.current_page = res.data.current_page
                    this.last_page = res.data.last_page
                }
            })
        },
        // 加载更多用户列表
        loadingUser() {
            if (this.current_page >= this.last_page) {
                this.noMore = true;
                return
            }
            this.current_page++
            this.$u.api.getRoomUser({
                room_id: this.roomDetail.id,
                current_page: this.current_page
            }).then(res => {
                if (res.code === 1) {
                    this.userList = this.userList.concat(res.data.data)
                    this.total = res.data.total
                    this.current_page = res.data.current_page
                    this.last_page = res.data.last_page
                }
            })
        },
        // 时间格式化
        formatTime(timeStamp) {
            return new Date(timeStamp * 1000).toLocaleString()
        },
        // 计算倒计时
        countdown() {
            // 获取当前的时间戳
            const currentTimestamp = Math.floor(Date.now() / 1000);
            // 计算差值
            const difference = this.roomDetail.prize_time - currentTimestamp;
            // 转换差值为天、小时、分钟和秒
            this.seconds = difference % 60;
            this.minutes = Math.floor(difference / 60) % 60;
            this.hours = Math.floor(difference / 3600) % 24;
            this.days = Math.floor(difference / (3600 * 24));
            this.disabled = false
        },
        // 倒计时结束
        ends() {
            this.disabled = true
        },
        // 进入房间
        intoRoom() {
            this.intoRoomLoading = true
            this.$nextTick(() => {
                // 时间结束
                if (this.disabled) {
                    this.$refs.uToast.show({
                        title: "Ended, unable to participate!",
                        type: 'error'
                    });
                    return
                }
                this.$u.api.intoRoom({
                    room_id: this.roomDetail.id
                }).then(res => {
                    if (res.code === 1) {
                        this.$refs.uToast.show({
                            title: res.msg,
                            type: 'success'
                        });
                        this.getRoomDetail(this.roomDetail.id)
                        this.getUserList()
                    } else {
                        this.$refs.uToast.show({
                            title: res.msg,
                            type: 'error'
                        });
                    }
                })
            })
            this.intoRoomLoading = false

        },
        // 获取中奖信息
        getRoomPrizeUser() {
            this.$u.api.getRoomPrizeUser({
                room_id: this.roomDetail.id
            }).then(res => {
                if (res.code === 1) {
                    this.prizeUserList = res.data.data
                    // console.log(this.prizeUserList);
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.room {
    background-color: #060a1e;

    .room-detail {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
        //margin-right: 10rpx;
        //margin-left: 10rpx;

        background: linear-gradient(to bottom, #0f0e2c, #1d1b4a);
        border-bottom: 1px solid #322bcd;
        border-radius: 0 0 20rpx 20rpx; /* 修改这个值可以调整圆角的大小 */
        color: white;
        height: 450rpx;


        .line {
            border-top: 1px dashed #65a3ff;
            border-bottom: 1px dashed #65a3ff;
            width: 100%;
            margin: 30rpx 0; /* 上下边距为20rpx */
        }

        .custom-style {
            color: #ffffff;
            height: 80rpx;
            background-color: #5d7ef2;
            //background: linear-gradient(to right, #c70e97, #2c05cf);
        }
    }
}

.result {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #0f0e2d;
    color: white;
    padding: 20rpx 50rpx;

    .result-text {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.goods-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    //padding: 20rpx;
    margin: 20rpx 10rpx;
    padding: 10rpx;
    border-radius: 20rpx;
    position: relative;

    .goods-list-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 10rpx;
    }

    .goods-list-price {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
    }
}

.user-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-top: 35rpx;
    padding-bottom: 50rpx;
    width: 100%;

    .loading-style {
        color: #ffffff;
        height: 45rpx;
        background: linear-gradient(to right, #c70e97, #2c05cf);
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}

</style>
